<template>
	<default-header-page-layout ref="page" title="组盘入库" >
		<view class="page-frame with-action-user-row" :style="{height:pageBodyHeight+'px'}" v-if="pageBodyHeight">
			<action-user-row />
			<view class="with-action-user-row-page-content">
				<!-- step 1 start -->
				<template v-if="step===1">
					<scan-input-form-item
						class="forma-item"
						label="托盘编码"
						v-model="forma.containter"
						:msg="msg.containter"
						:msg-type="msgType.containter"
						@search="onSearchContainter"
						@clear="onClearContainter"
					/>
					<scan-input-form-item
						class="forma-item"
						label="物料编码"
						v-model="forma.material"
						:msg="msg.material"
						:msg-type="msgType.material"
						:disabled="materialDisabled"
						@search="onSearchMaterial"
						@clear="onClearMaterial"
					/>
					<view class="material-item-group" v-if="list.length>0">
						<view class="material-list-item" v-for="(item,index) in list" :key="'material-list-item-'+index">
							<view class="close-btn" @tap.stop="onDelList(index)" v-if="!materialDisabled">
								<view class="icon-layer"><u-icon name="close" color="#ffffff" size="24" /></view>
							</view>
							<view class="badge-box"><u-badge :value="index+1" bg-color="#F18201" /></view>
							<view class="item-row">
								<view class="label">物料编号：</view>
								<view class="content auto-wrap">{{item.materialno}}</view>
							</view>
							<view class="item-row">
								<view class="label">物料名称：</view>
								<view class="content auto-wrap">{{item.materialname}}</view>
							</view>
							<view class="item-row">
								<view class="label">批次号：</view>
								<view class="content auto-wrap">{{item.materialbatch}}</view>
							</view>
							<view class="item-row">
								<view class="label">数量：</view>
								<view class="content auto-wrap">
									<input  type="number" v-model.trim="item.bindquantity" />
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- step 1 end -->
				<!-- step 2 start -->
				<template v-if="step===2">
					<easy-select-form-item
						v-if="stepTwoType==='auto'"
						class="forma-item"
						label="入库口"
						:list="selectList.entrance"
						v-model="formb.entrance"
						:msg="msg.entrance"
						:msg-type="msgType.entrance"
						@clear="onClearEntrance"
					/>
					<scan-input-form-item
						v-else
						class="forma-item"
						label="库位号"
						v-model="formb.placecode"
						:msg="msg.placecode"
						:msg-type="msgType.placecode"
						:has-search="false"
						@clear="onCleaPlaceCode"
					/>
				</template>
				<!-- step 2 end -->
			</view>
			
		</view>
		<template v-slot:footer>
			<view class="bottom-btns-row">
				<template v-if="step===1">
					<div class="btn-frame left-btn-frame"><u-button text="仅组盘" :disabled="bindBtnDisabled" @click="onBind"></u-button></div>
					<div class="btn-frame right-btn-frame"><u-button type="primary" :text="setpOneConfirmBtnText" :disabled="!containter" @click="onNext"></u-button></div>
				</template>
				<template v-else>
					<div class="btn-frame left-btn-frame"><u-button text="上一步" @click="onPrevStep"></u-button></div>
					<div class="btn-frame right-btn-frame"><u-button type="primary" text="提 交" @click="onSubmit"></u-button></div>
				</template>
			</view>
		</template>
	</default-header-page-layout>
</template>

<script>
import DefaultHeaderPageLayout from '@/components/DefaultHeaderPageLayout.vue'
import ActionUserRow from '@/components/ActionUserRow.vue'
import ScanInputFormItem from '@/components/ScanInputFormItem.vue'
import EasySelectFormItem from '@/components/EasySelectFormItem.vue'
import { parseDic, $alert, $successInfo } from '@/static/js/utils/index.js'
let initInterVal = null;
const defaultFormA = {
	containter:'',
	material:''
}
const defaultFormB = {
	entrance:'',
	placecode:''
}
export default {
	name:'baseInPage',
	components:{DefaultHeaderPageLayout,ActionUserRow,ScanInputFormItem,EasySelectFormItem},
	data(){
		return {
			pageBodyHeight:0,
			step:1,
			containter:null,
			forma:{...defaultFormA},
			formb:{...defaultFormB},
			msg:{
				containter:'',
				material:'',
				entrance:'',
				placecode:''
			},
			msgType:{
				containter:'info',
				material:'error',
				entrance:'error',
				placecode:'error'
			},
			list:[],
			materialDisabled:false,
			stepTwoType:'',
			selectList:{
				entrance:[]
			}
		}
	},
	computed:{
		bindBtnDisabled(){
			let res = true;
			if (this.containter && this.containter.containerstatus!==3 && this.list.length>0) {
			  res = false;
			}
			return res;
		},
		setpOneConfirmBtnText(){
			let res = '入 库'
			if (this.containter && this.containter.containerstatus===3) {
			  res = '移 库'
				this.stepTwoType = 'yiku'
			} else {
				this.stepTwoType = ''
			}
			return res;
		}
	},
	methods:{
		/* 托盘编码搜索 */
		onSearchContainter(){
			if (!this.forma.containter) {
			  this.msgType.containter = 'error'
			  this.msg.containter = '请输入托盘号！';
			  return false;
			}
			this.msg.containter = '';
			this.getContainterInfo()
		},
		/* 清除托盘编码 */
		onClearContainter(){
			this.resetContainter()
		},
		/* 物料编码搜索 */
		onSearchMaterial(){
			if (!this.forma.material) {
			  this.msg.material = '请输入物料编号！';
			  return false;
			}
			this.msg.material = ''
			this.getMaterialInfo()
		},
		/* 清除物料编码 */
		onClearMaterial(){
			this.resetMaterial()
		},
		/* 清除入库口 */
		onClearEntrance(){
			this.resetEntrance()
		},
		/* 清除库位号 */
		onCleaPlaceCode(){
			this.resetPlacecode()
		},
		/* 删除物料列表某条数据 */
		onDelList(index){
		  this.list.splice(index,1)
		},
		/* 重置托盘编码 */
		resetContainter(){
		  this.msg.containter = '';
		  this.forma.containter = ''
		  this.containter = null;
		  this.materialDisabled = false;
		},
		/* 重置物料编码 */
		resetMaterial(){
		  this.msg.material = '';
		  this.forma.material = ''
		},
		/* 重置入库口 */
		resetEntrance(){
			this.formb.entrance = ''
			this.msg.entrance = ''
		},
		/* 重置库位号 */
		resetPlacecode(){
			this.formb.placecode = ''
			this.msg.placecode = ''
		},
		/* 重置第二步表单 */
		resetFormB(){
		  this.resetEntrance()
		  this.resetPlacecode()
		},
		/* 页面重置 */
		reset(){
			this.resetContainter()
			this.resetMaterial()
			this.resetFormB()
			this.list = []
			this.stepTwoType = ''
			this.step = 1
		},
		/* 获取托盘信息 */
		getContainterInfo(callback,needloding=true){
			let params = {Containercode:this.forma.containter}
			if (needloding) {
				uni.showLoading({
					title: '加载中...',
					mask:true
				});
			}
			this.$api.get('GetContainer',params,{block:'bindEntrance',fullRes:true,loading:false}).then((d)=>{
				if (d.data) {
					let _temp1 = parseDic(this.$store,'container_type',d.data.wmsContainer.containertype)
					let _temp2 = parseDic(this.$store,'container_status',d.data.wmsContainer.containerstatus)
				  this.msgType.containter = 'info'
				  this.msg.containter = `材质：${_temp1}，状态：${_temp2}`;
				  this.containter = d.data.wmsContainer
					if (d.data.wmsContainer.containerstatus===3) {
					  this.materialDisabled = true;
					} else {
						this.materialDisabled = false;
					}
				  if (d.data.wmsMaterials) {
				    this.list = d.data.wmsMaterials
				  } 
				  callback && callback(true)
				} else {
				  this.msgType.containter = 'error'
				  this.msg.containter = d.message || '查无信息！';
				  this.containter = null;
				  this.list = []
				  callback && callback(false)
				}
				if (needloding) {
					uni.hideLoading();
				}
			}).catch(()=>{
				this.containter = null;
				this.list = []
				if (needloding) {
					uni.hideLoading();
				}
				callback && callback(false)
			})
		},
		/* 获取物料信息 */
		getMaterialInfo(callback){
		  let params = {Materialno:this.forma.material}
		  this.$api.get('GetMaterial',params,{block:'bindEntrance',fullRes:true}).then((d)=>{
		    if (d.data) {
		      let cf = this.checkMaterialSame(d.data);
		      if (cf) {
		        let obj = {...d.data}
		        obj.bindquantity = 0;
		        this.list.push(obj)
		        callback && callback(true)
		      } else {
		        callback && callback(false)
		      } 
		    } else {
		      this.msg.material = d.message || '查无信息！';
		      callback && callback(false)
		    }
		  }).catch((err)=>{
		    callback && callback(false)
		  })
		},
		/* 检查新增物料的重复性 */
		checkMaterialSame(obj) {
		  let res = true;
		  for (let i=0;i<this.list.length;i++) {
		    if (this.list[i].materialno===obj.materialno) {
		      res = false;
		      break;
		    }
		  }
		  if (!res) {
				$alert('已有物料，不可添加！')
		  }
		  return res;
		},
		/* 验证：组盘、第二步 */
		checkBeforeNext(){
			let flag=true, msg="";
			
			if (this.list.length>0) {
			  for (let i=0;i<this.list.length;i++) {
			    if (!this.list[i].bindquantity) {
			      msg = `请确认第${i+1}笔物料的数量！`
			      flag = false;
			    }
			    if (flag && Number(this.list[i].bindquantity)!==parseInt(this.list[i].bindquantity)) {
			       msg = `第${i+1}笔物料,数量只能是正整数！`
			       flag = false;
			    }
			  }
			}
			
			if (!flag && msg) {
				$alert(msg)
			}
			
			return flag;
		},
		/* 响应组盘按钮 */
		onBind(){
			let cf = this.checkBeforeNext();
			if (!cf) return false;
			/* 注意，由于组盘完成后会再次调用托盘信息接口更新托盘数据，所以此处接口调用取消接口封装的loading设置，可自由控制全屏loading */
			uni.showLoading({
				title: '加载中...',
				mask:true
			});
			this.dealBind((f)=>{
			  if (f) {
			    this.getContainterInfo((f1)=>{
			      uni.hideLoading();
						if (f1) {
							 $successInfo('组盘成功！');
						}
			    },false)
			  } else {
			    uni.hideLoading();
			  }
			})
		},
		/* 响应第一步按钮 */
		onNext(){
			let cf = this.checkBeforeNext();
			if (!cf) return false;
			if (this.stepTwoType==='yiku') {
				this.goStepTwo()
			} else {
				uni.showModal({
					content:'请选择入库方式！',
					cancelText:'手动入库',
					confirmText:'自动入库',
					success:(res=>{
						if (res.confirm) {
							this.stepTwoType='auto'
							this.goStepTwo()
						} else if (res.cancel) {
							this.stepTwoType='manual'
							this.goStepTwo()
						}
					})
				})
			}
		},
		/* 响应上一步按钮 */
		onPrevStep(){
			this.resetFormB()
			this.step=1
		},
		/* 进入第二步页面 */
		goStepTwo(){
			this.step = 2
			if (this.stepTwoType==='auto' && this.selectList.entrance.length===0) {
				this.$api.get('GetEntrance',{},{block:'bindEntrance'}).then((d)=>{
				  this.selectList.entrance = d || []
				}).catch((err)=>{})
			}
		},
		/* 响应提交按钮 */
		onSubmit(){
			if (this.stepTwoType==='auto') {
				if (!this.formb.entrance) {
				  this.msg.entrance = '请选择入库口！';
				  return false;
				}
				this.msg.entrance = ''
			} else {
				if (!this.formb.placecode) {
				  this.msg.placecode = '请输入库位号！';
				  return false;
				}
				this.msg.placecode = ''
			}
			
			if (this.stepTwoType==='auto') {
				this.dealAutoIntrance((f)=>{
				  if (f) {
						this.reset()
				    $successInfo('入库成功！');
				  } 
				})
			} else if (this.stepTwoType==='manual') {
				this.dealManualIntrance((f)=>{
				  if (f) {
						this.reset()
				    $successInfo('入库成功！');
				  } 
				})
			} else if (this.stepTwoType==='yiku') {
				this.dealTransfer((f)=>{
				  if (f) {
						this.reset()
				    $successInfo('移库成功！');
				  } 
				})
			}
		},
		/* 组盘接口调用 */
		dealBind(callback){
			let params = {
			  containercode:this.containter.containercode,
			  wmsMaterials:this.list
			}
			this.$api.post('BindEntrance',params,{block:'bindEntrance',loading:false}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 手动入库接口调用 */
		dealManualIntrance(callback){
			let params = {
			  containercode:this.containter.containercode,
			  wmsMaterials:this.list,
			  placecode:this.formb.placecode
			}
			this.$api.post('ManualWare',params,{block:'bindEntrance'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 自动入库接口调用 */
		dealAutoIntrance(callback){
			let params = {
			  containercode:this.containter.containercode,
			  wmsMaterials:this.list,
			  entrance:this.formb.entrance
			}
			this.$api.post('AutoWare',params,{block:'bindEntrance'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 移库接口调用 */
		dealTransfer(callback){
			let params = {
			  containercode:this.containter.containercode,
			  placecode:this.formb.placecode
			}
			this.$api.post('StockTransfer',params,{block:'bindEntrance'}).then(()=>{
				callback && callback(true)
			}).catch(()=>{
				callback && callback(false)
			})
		},
		/* 页面初始化获取页面body高度的定时器 */
		startInitInterval(callback){
			initInterVal = setInterval(()=>{
				if (this.pageBodyHeight) {
					this.clearInitInterval()
					callback && callback()
				} else {
					this.pageBodyHeight = this.$refs.page.getBodyHeight()
				}
			},200)
		},
		/* 清除定时器 */
		clearInitInterval(){
			try{
				clearInterval(initInterVal)
				initInterVal = null
			}catch(e){
				//TODO handle the exception
			}
		}
	},
	onReady(){
		this.startInitInterval(()=>{
			/* 页面初始化后需要执行的代码在这边调用 */
		})
	},
	onUnload(){
		this.clearInitInterval()
	}
}
</script>

<style scoped lang="scss">
.bottom-btns-row{
	display: flex;
	padding: 10rpx 0;
	background-color: #fff;
	.btn-frame{
		width: 50%;
		box-sizing: border-box;
	}
	.left-btn-frame{
		padding-left: 20rpx;
		padding-right: 8rpx;
	}
	.right-btn-frame{
		padding-right: 20rpx;
		padding-left: 8rpx;
	}
}
.forma-item{
	margin-bottom: 24rpx;
}
.material-item-group{
	background-color: $uni-bg-color;
	padding-top: 10rpx;
	.material-list-item{
		border-bottom: 2rpx solid $uni-border-color;
		padding-bottom: 10rpx;
		padding-left: 60rpx;
		margin-bottom: 10rpx;
		position: relative;
		&:last-child{
			border-bottom: 0;
		}
		.item-row{
			display: flex;
			&>.label{
				flex-shrink: 0;
				color: $u-tips-color;
				width: 144rpx;
			}
			&>.content{
				flex-grow: 1;
				color: $u-content-color;
				uni-input{
					font: inherit;
					color: $u-primary;
					text-decoration: underline;
				}
			}
		}
		.badge-box{
			position: absolute;
			top:8rpx;
			left: 8rpx;
			z-index: 1;
		}
		.close-btn{
			$closeBtnSize:70rpx;
			width: $closeBtnSize;
			height: $closeBtnSize;
			z-index: 1;
			position: absolute;
			top:0rpx;
			right: 8rpx;
			background-color: $u-error;
			opacity: 0.6;
			border-radius: 25rpx;
			.icon-layer{
				position: absolute;
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				z-index: 2;
			}
		}
	}
}
</style>